<template>
  <el-drawer
    :wrapperClosable="false"
    :title="title"
    :visible.sync="open"
    direction="rtl"
    :style="{ right: `${drawerSkewing}px`,  'transition': '.2s' }"
  >
    <el-container>
      <el-main>
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-position="top"
          label-width="80px"
        >

          <!-- 标签标识 -->
          <el-form-item label="标签标识" prop="id">
            <el-input :disabled="idDisabled" v-model="form.id" placeholder="请输入标签标识" />
          </el-form-item>

          <!-- 标签名称 -->
          <el-form-item label="标签名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入标签名称" />
          </el-form-item>

          <!-- 数据类型添加编辑表单 -->
          <value-type-add-edit
            :form-data="form.valueType"
            ref="valueTypeAddEdit"
            @child-visible="handleChildVisible"
            :visible="open"
            type-label="数据类型"
          />

          <!-- 是否只读 -->
          <el-form-item label="是否只读" prop="expands.readOnly">
            <el-radio-group v-model="form.expands.readOnly">
              <el-radio
                v-for="dict in dict.type.iot_read_only"
                :key="dict.value" :label="dict.value"
              >{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 描述 -->
          <el-form-item label="描述" prop="description">
            <el-input v-model="form.description" type="textarea" placeholder="请输入内容" />
          </el-form-item>

        </el-form>

      </el-main>
      <el-footer>

        <div class="bottom-bar" style="text-align:right">
          <el-button @click="cancel">关 闭</el-button>
          <el-popover
            v-if="submitType === 'save&deploy'"
            popper-class="popper"
            style="margin-left: 10px;"
            placement="top"
            width="100px"
            v-model="popoverVisible"
            trigger="hover"
          >
            <div style="text-align: left;">
              <div>
                <el-button size="small" @click="submitForm">仅保存</el-button>
              </div>
              <div style="margin-top: 10px">
                <el-button size="small" @click="submitDeployForm">保存并生效</el-button>
              </div>
            </div>
            <el-button icon="el-icon-arrow-down" type="primary" slot="reference">保 存</el-button>
          </el-popover>
          <el-button v-if="submitType === 'save'" type="primary" @click="submitForm">保 存</el-button>
        </div>

      </el-footer>
    </el-container>
  </el-drawer>
</template>

<script>
import ValueTypeAddEdit from '@/views/iot/product/physical-model/valueTypeAddEdit'

export default {
  name: 'TagsAddEdit',
  components: {
    ValueTypeAddEdit
  },
  // 字典
  dicts: [
    // 是否只读
    'iot_read_only'
  ],
  props: {
    submitType: {
      type: String,
      default: 'save&deploy'
    }
  },
  data() {
    return {
      // 对话框标题
      title: undefined,
      // 对话框显示状态（默认隐藏）
      open: false,
      // 防止抽屉关闭时Popover 弹出框还未关闭
      popoverVisible: false,
      // 抽屉偏移大小
      drawerSkewing: 0,
      // 表单参数
      form: {
        // 输出参数
        valueType: {
          // 拓展定义
          expands: {},
          // 枚举数据
          elements: [{}],
          // 元素类型
          elementType: {
            // 拓展定义
            expands: {},
            // 枚举数据
            elements: [{}],
            // JSON 对象
            properties: []
          },
          // JSON 对象
          properties: []
        },
        // 拓展定义
        expands: {}
      },

      // 标识默认非禁用的
      idDisabled: false,

      // 表单校验
      rules: {
        id: [
          { required: true, message: '标签标识不能为空', trigger: 'change' }
        ],
        name: [
          { required: true, message: '标签名称不能为空', trigger: 'change' }
        ],
        expands: {
          /*是否只读*/
          readOnly: [
            { required: true, message: '请选择是或者否', trigger: 'change' }
          ]
        }
      }
    }
  },
  methods: {
    /** 表单重置 */
    reset() {
      this.form = {
        id: null,
        name: null,
        // 输出参数
        valueType: {
          // 扩展定义
          expands: {},
          // 枚举数据
          elements: [{}],
          // 元素类型
          elementType: {
            // 拓展定义
            expands: {},
            // 枚举数据
            elements: [{}],
            // JSON 对象
            properties: []
          },
          // JSON 对象
          properties: []
        },
        // 拓展定义
        expands: {},
        description: null
      }
      this.resetForm('form')
    },
    /** 取消按钮操作 */
    cancel() {
      this.open = false
      this.reset()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      // 标识还原成可输入状态
      this.idDisabled = false
      this.open = true
      this.title = '添加标签'
    },
    /** 修改按钮操作 */
    handleUpdate(data) {
      this.reset()
      // 不允许更新标识
      this.idDisabled = true
      this.form = data
      this.open = true
      this.title = '编辑标签'
    },
    /** 提交按钮 */
    async submitForm(publishState) {
      let pass = true

      await this.$refs.valueTypeAddEdit.handleSubmit().then(valid => {
        if (!valid) {
          pass = valid
        }
      })
      await this.$refs['form'].validate(valid => {
        if (!valid) {
          pass = valid
        }
      })

      if (pass) {
        this.$emit('submit', this.form, () => {
          this.$modal.msgSuccess('保存成功')
          // 关闭抽屉
          this.open = false
          this.popoverVisible = false
        }, publishState)
      }
    },
    submitDeployForm() {
      this.submitForm(1)
    },
    /**
     * 根据子页面隐藏与显示偏移当前页面，子页面显示当前页面左偏移200px，关闭还原
     * @param state
     */
    handleChildVisible(state) {
      state ? this.drawerSkewing = 200 : this.drawerSkewing = 0
    }
  }
}
</script>

<style lang="scss">

.popper {
  min-width: 100px;
}

</style>
